<template>
  <view class="order">
    <!-- 顶部导航栏-->
    <view class="header">
      <view class="left-text" @click="comeBack">
        <uni-icons type="back" size="10" color="#0c34ba"></uni-icons>
        返回
      </view>
      <view class="title">
        订单结算
      </view>
      <view class="right-text" style="width: 50rpx;">
      </view>
    </view>


    <!-- 收货地址-->
    <view class="address" v-if="curAddress">

      <!-- 选择-->
      <view class="choose" @click="isToastShow=true">
        选择地址<uni-icons type="forward" size="10"></uni-icons>
      </view>

      <!-- 收货人信息-->
      <view class="info">
        <view class="name">
          {{curAddress['name']}}
        </view>
        <view class="phone">
          {{curAddress['tel']}}
        </view>
        <view class="default" v-show="curAddress['isDefault']">
          默认
        </view>
      </view>

      <!-- 收货地址-->
      <view class="area">
        {{curAddress['province']}}{{curAddress['city']}}{{curAddress['county']}}
      </view>


    </view>
    <view v-else class="address-empty">
      <view class="add-address" @click="goAddAddress">
        添加地址
      </view>
    </view>

    <!-- 商品订单列表 -->
    <view class="card">
      <view class="title">
        订单信息
      </view>
      <view class="goods-info" v-for="e in orders " :key="e['sid']">
        <view class="goods-cover">
          <image :src="e['small_img']" mode="widthFix">
          </image>
        </view>

        <view class="c2">
          <!-- 第一行-->
          <view class="r1">
            <view class="name">
              {{e['name']}}
            </view>
            <view class="rule">
              {{e['rule']}}
            </view>
          </view>
          <!-- 第二行英文名-->
          <view class="r2-enname">
            {{e['enname']}}
          </view>

          <!-- 第三行 -->
          <view class="r3">
            <view class="price">
              ￥{{e['price']}}
            </view>

            <!-- 数量选择-->
            <view class="operation">
              x{{e['count']}}
            </view>
          </view>

        </view>

      </view>


      <!-- 订单详细-->
      <view class="order-info">
        <view class="r1">
          <view class="date">
            {{curDateTime}}
          </view>

        </view>
        <view class="r2">
          <view class="total">
            共计{{ordersNum}}件
          </view>
          <view class="price">
            合计 ￥{{ordersTotal}}
          </view>
        </view>
      </view>


    </view>


    <!-- 支付订单-->
    <view class="pay-order">
      <view class="pay-btn" @click="payHandler">
        立即结算
      </view>
    </view>


    <!-- 新增地址-->
    <view class="choose-address " :class="isToastShow?'show':''">
      <view class=" header">
        <text>选择地址</text>
        <uni-icons type="closeempty" size="20" color="#c6c9ce" @click="isToastShow=false"></uni-icons>
      </view>
      <view class="card">
        <view @click="chooseadsHandler(idx)" class="address-item" v-for="(e,idx) in userAddressAddprop "
          :key="e['aid']">
          <label class="radio">
            <radio style="transform: scale(70%);" :checked="e['isActive']" color="#0c34ba" /><text></text>
          </label>
          <view class="address-info">
            <view class="info">
              <text>{{e['name']}}</text>
              <text>{{e['tel']}}</text>
              <text class="default" v-show="e['isDefault']">默认</text>
            </view>
            <view class="area">
              {{e['province']}}{{e['city']}}{{e['county']}}
            </view>
          </view>
        </view>
      </view>
      <view class="add-address">
        <view class="add-btn" @click="goAddAddress">
          新增地址
        </view>
      </view>
    </view>

    <!-- 遮罩层-->
    <view @click="isToastShow=false" class="ToastShow" v-show="isToastShow"> </view>
  </view>
</template>

<script>
  import {
    req
  } from '../utils/request/request';
  import {
    mapState,
    mapMutations,
    mapGetters
  } from "vuex"
  import {
    uniToast
  } from '../utils/uni/uni';
  export default {
    data() {
      return {
        isToastShow: false,
        orders: [],
        sids: ""
      };
    },
    onLoad(opts) {
      this.sids = opts['sids']
      this.getOrdersHandler(this.sids)
    },
    computed: {
      ...mapGetters("user", ["curAddress"]),
      ...mapState("user", ["userAddress", "addressIdx"]),
      /* 计算订单件数 */
      ordersNum() {
        return this.orders.reduce((total, item) => total += item.count, 0)
      },
      /* 计算总价格 */
      ordersTotal() {
        return this.orders.reduce((total, item) => total += item.count * item.price, 0).toFixed(2)
      },
      /* 计算当前时间 */
      curDateTime() {
        const date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
      },
      /* 给每个地址追加属性 */
      userAddressAddprop() {
        const arr = []
        this.userAddress['addressData'].forEach((e, i) => {
          if (i === this.userAddress['addressIdx']) {
            this.$set(e, 'isActive', true)
          } else {
            this.$set(e, 'isActive', false)
          }
          arr.push(e)
        })
        return arr
      }
    },
    methods: {
      ...mapMutations("user", ['USERCHOOSEADDRESS']),
      /* 添加地址 */
      goAddAddress() {
        uni.navigateTo({
          url: '/pages/my/my/my_address/add_address/add_address?sids=' + this.sids
        })
      },
      chooseadsHandler(idx) {
        this.USERCHOOSEADDRESS(idx)
        this.isToastShow = false
      },
      /*        立即结算接口
              请求地址：http://www.kangliuyong.com:10002/pay
              请求类型： POST
              请求参数： {
                appkey: 你的appkey,
                tokenString: token字符串,
                sids: 购物车唯一标识集合,
                phone: 手机号,
                address: 收货地址,
                receiver: 收货人
              }*/
      payHandler() {
        const formData = {
          sids: this.sids,
          phone: this.curAddress['tel'],
          address: this.curAddress['province'] + this.curAddress['city'] + this.curAddress['county'],
          receiver: this.curAddress['name']
        }
        req('pay', {
          reqData: formData,
          isToken: true,
          method: 'post'
        }).then(({
          data: res
        }) => {
          if (res['code'] === 60000) {
            this.timer = setTimeout(() => {
              uni.navigateBack()
            }, 500)
          }
          uniToast(res['msg'])
        }, err => {
          console.log(err);
        })
      },


      /* 获取需要购买的商品 */
      getOrdersHandler(sids) {
        req('commitShopcart', {
          reqData: {
            sids
          },
          isToken: true
        }).then(({
          data: res
        }) => {
          this.orders = res['result']
        }, err => {
          console.log(err);
        })

      },


      /* 移除购物车商品*/
      removeShopcart() {
        req('removeShopcart', {
          isToken: true,
          method: 'post',
          reqData: {
            sids: this.sids
          }
        }).then(res => {}, err => {
          console.log(err);
        })
      },
      /* 返回 */
      comeBack() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order {
    background-color: #f7f7ff;
    position: relative;
    overflow: hidden;
    height: 100vh;

    .header {
      height: 98rpx;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      background-color: #fff;

      .title {
        font-size: 26rpx;
      }

      .left-text {
        color: #0c34ba;
      }
    }

    .address-empty {
      height: 150rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      margin: 20rpx;

      font-size: 28rpx;

      .add-address {
        background-color: #67C23A;
        padding: 20rpx 40rpx;
        border-radius: 10rpx;
        color: #fff;
      }
    }

    .address {
      font-size: 26rpx;
      margin: 20rpx;
      background-color: #fff;
      padding: 20rpx;

      .choose,
      .info {
        margin-bottom: 20rpx;
      }

      .choose {
        display: flex;
        align-items: center;
      }

      .info {
        display: flex;
        align-items: center;

        .name {
          color: #0c34ba;
          font-weight: bold;
          margin-right: 40rpx;
        }

        .phone {
          margin-right: 40rpx;
        }

        .default {
          background-color: #0c34ba;
          color: #fff;
          border-radius: 50rpx;
          font-size: 24rpx;
          padding: 5rpx 20rpx;
        }


      }

      .area {
        color: #bbb;
      }
    }


    .card {
      background-color: #fff;
      margin: 0 20rpx 20rpx 20rpx;
      padding: 20rpx;
      border-top-right-radius: 10rpx;
      border-top-left-radius: 10rpx;

      .title {
        color: #333;
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }


      .goods-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;


        .goods-cover {
          display: flex;
          align-items: center;
          width: 160rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .c2 {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 50rpx;

          .r1 {
            display: flex;
            font-size: 26rpx;
            align-items: center;

            .name {
              margin-right: 25rpx;
              font-size: 30rpx;
              color: #333;
            }

            .rule {
              color: #bbb;
            }
          }

          .r2-enname {
            font-size: 26rpx;
            color: #ccc
          }

          .r3 {
            display: flex;
            justify-content: space-between;
            margin: 10rpx 0;
            align-items: center;

            .price {
              color: #0c34ba;
              font-size: 26rpx;
              font-weight: bold;
            }

            .operation {
              color: #bbb;
              font-size: 20rpx;
            }
          }
        }

        .goods-cover {
          image {
            width: 140rpx;
          }
        }
      }

    }


    .order-info {
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      position: relative;
      border-top: #ddd 2rpx dashed;
      padding: 20rpx 0;

      &::before,
      &::after {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fbf6f2;
        position: absolute;
        z-index: 1;
        top: 0;
      }

      &::before {
        left: 0;
        transform: translate(-100%, -20rpx);
      }

      &::after {
        transform: translate(100%, -20rpx);
        right: 0;
      }

      .r2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;

        .price {
          color: #0c34ba;
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }


    .pay-order {
      padding: 20rpx;
      margin-top: 60rpx;

      background-color: #fff;

      .pay-btn {
        background-color: #0c34ba;
        color: #fff;
        font-size: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx;
        height: 90rpx;
      }
    }


    .ToastShow {
      background-color: #00000094;
      height: 100vh;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      z-index: 2;
    }

    .choose-address {
      height: 570rpx;
      overflow: auto;
      position: absolute;
      right: 0;
      left: 0;
      bottom: -570rpx;
      z-index: 10;
      background-color: #fff;
      transition: all .3s linear;

      &.show {
        bottom: 0;
      }

      .header {
        color: #333;
      }

      .add-address {
        padding: 0 40rpx;
        padding-bottom: 20rpx;
        margin-top: 100rpx;

        .add-btn {
          background-color: #0c34ba;
          color: #fff;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 80rpx;
          border-radius: 50rpx;
        }
      }

      .address-item {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        padding-bottom: 20rpx;
        border-bottom: dashed #bbb 2rpx;
        color: #333;
        margin-bottom: 20rpx;

        &:last-child {
          border-bottom: dashed #bbb 0;
          margin-bottom: 0;
        }

        .address-info {
          position: relative;

          .info {
            text {
              margin-right: 20rpx;

              &.default {
                background-color: #0c34ba;
                color: #fff;
                border-radius: 50rpx;
                font-size: 20rpx;
                padding: 2rpx 10rpx;
              }
            }
          }

          .area {
            margin-top: 20rpx;
          }
        }
      }
    }
  }
</style>
